﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>QlikView Mashups - Div Integration</title>
	<link type="text/css" href="library/css/reset.css"  rel="stylesheet"/>
	<link type="text/css" href="library/css/smoothness/jquery-ui-1.9.1.custom.css"  rel="stylesheet"/>
	<link type="text/css" href="library/css/style.css"  rel="stylesheet"/>

	<script language="javascript" type="text/javascript" src="library/js/jquery-1.8.2.min.js"></script>
	<script language="javascript" type="text/javascript" src="library/js/jquery-ui-1.9.1.custom.js"></script>
    <script language="javascript" type="text/javascript" src="library/js/QlikViewMashups.js"></script>

	<script type="text/javascript" language="javascript">
	    $(function () {

	        // Only show the message that we are note offline, if we are not offline ;-)
	        if (!IsOffline()) {
	            $("#divMsgNotOffline").show();
	        }

	        // Prevent caching for all demos
	        $(".link_demo").each(function () {
	            $(this).attr('href', $(this).attr('href') + '?rnd=' + randomFromInterval(1, 100000000));
	        });

	        // Tabs
	        $("#tabs").tabs({
	            select: function (event, ui) {
	                if (ui.index == 1)
	                {
	                    var $ifrTarget = $("#ifrm_demo");
	                    // Load the first demo if not already loaded
	                    if ($ifrTarget.contents().get(0).location.href.indexOf('blank.html') != -1)
	                    {
	                        var $lnkSrc = $('#example_0');
	                        $lnkSrc.trigger('click');
	                        $ifrTarget.attr('src', $lnkSrc.attr('href'));
	                    }
	                }
	            }
	        });

	        $('#lnkMsgOffline').click(function () {
	            OfflineMsg();
	        });

	        $('.link_demo').click(function () {
	            $(".demo-list").find(".active").removeClass("active");
	            $(this).parent().addClass("active");
	        });

	        $('#ifrm_demo').load(function () {
	            var $ifr = $('#ifrm_demo');
	            if ($ifr.contents().get(0).location.href != "about:blank") {
	                $('#demo_title').text($ifr.contents().find('#demo_title').html());
	                $('#demo-description').html($ifr.contents().find('#demo_description').html());
	                $('#demo-source-header').html($ifr.contents().find('#demo_code_header').html());
	                $('#demo-source-css').html($ifr.contents().find('#demo_code_css').html());
	                $('#demo-div-integration').html($ifr.contents().find('#demo_code_body').html());
	            };
	        });



	    });
	</script>
    <style type="text/css">
    .ui-menu { width: 250px; }
    </style>
</head>
<body>
<div class="MainContainer">
    <div id="mnu" class="BackToIndex"><a id="mnuCaller" href="#">Menu</a></div>
    <div id="mnuContainer"></div>

	<h1>QlikView Mashups - Div Integration</h1>

	<div id="tabs">
		<ul>
			<li><a href="#tabs-introduction">Introduction</a></li>
			<li><a href="#tabs-examples">Examples</a></li>
		</ul>
		<div id="tabs-introduction">

            
			<h2 class="h2Tabs">Introduction</h2>
				<p>
					These examples make use of the QlikView Ajax library.<br />
					For getting these examples to work you first have to make sure that you include a reference to the QlikView Javascript library in the header of your Html file:
				</p>
				<pre class="wrapped">
				&lt;script language="javascript" type="text/javascript" src="http://localhost/QVAJAXZfc/htc/QvAjax.js"&gt;&lt;/script&gt;
				</pre>

				<p>
				After doing so, define a script block in the Html header which initializes the reference to the desired QlikView application:
				</p>
				
				<pre class="wrapped">
				&lt;script language="javascript" type="text/javascript"&gt;<br />
					&nbsp;&nbsp;&nbsp;Qv.InitWorkBench({<br />
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;View: 'Sales Compass',<br />
                    <br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Note: According to the documentation "Host: 'Local'" should be the default value,<br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//       but in my experience it seems to be more stable to use "Host: null" instead<br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Host: null<br />
					&nbsp;&nbsp;&nbsp;});<br />
				&lt;/script&gt;<br />
				</pre>
				
				<br />
                

                <h2>Further Resources &amp; Links:</h2>
				<p>
				Detailed information about the QlikView JavaScript API can be found at the following resources:<br />
				</p>
				
				<ul>
					<li>
						<b>Online QliView Javascript API (version 11)</b><br />
						<a href="http://qlikcommunity.s3.amazonaws.com/misc/index.html" target="_blank" class="lnkBlue">http://qlikcommunity.s3.amazonaws.com/misc/index.html</a>
					</li>
					<li>
						<b>Download for the QlikView Javascript API (version 11)</b><br />
						<a href="http://community.qlikview.com/docs/DOC-2673" target="_blank" class="lnkBlue">http://community.qlikview.com/docs/DOC-2673</a>
					</li>
					<li>
						<b>Download for the Javascript API (version 10)</b><br />
						<a href="http://community.qlikview.com/docs/DOC-2605" target="_blank" class="lnkBlue">http://community.qlikview.com/docs/DOC-2605</a>
					</li>
				</ul>
				
				
				
				<br />
		</div>
		<div id="tabs-examples">
				
			<div class="demo-list">
				<h2>Select QlikView Mashup Demos:</h2>
				<ul>
					<li><a href="QlikView_Mashups_DivIntegration_00.html" target="ifr_demo" class="link_demo active" id="example_0">Single Object</a></li>
					<li><a href="QlikView_Mashups_DivIntegration_01.html" target="ifr_demo" class="link_demo" id="example_1">Two objects</a></li>
					<li><a href="QlikView_Mashups_DivIntegration_02.html" target="ifr_demo" class="link_demo">Two objects using initial selections</a></li>
					<li><a href="QlikView_Mashups_DivIntegration_03.html" target="ifr_demo" class="link_demo">Clear existing selections after loading</a></li>
					<li><a href="QlikView_Mashups_DivIntegration_04.html" target="ifr_demo" class="link_demo">Open document and select a bookmark</a></li>
                    <li><a href="QlikView_Mashups_DivIntegration_05.html" target="ifr_demo" class="link_demo">Enable/Disable Inline Style</a></li>
                    <li><a href="QlikView_Mashups_DivIntegration_06.html" target="ifr_demo" class="link_demo">Using InitialSearch</a></li>
                    <li><a href="QlikView_Mashups_DivIntegration_10.html" target="ifr_demo" class="link_demo">Loading from different QlikView documents</a></li>
				</ul>
			</div>

			<div class="entry-content">
				<h2 id="demo_title"></h2>
				<iframe class="demo-frame" id="ifrm_demo" name="ifr_demo" src="library/content/blank.html"></iframe>
                <div id="divMsgNotOffline" class="demo-frame-notoffline hidden">
                    We are NOT working on offline mode, so the examples above are only simulate how integrate would look like.<br />
                    <a href="#" id="lnkMsgOffline" class="lnkBlue">Click here to find out why!</a>

                </div>

				<h2>Description:</h2>
				<div id="demo-description"></div>
				
                <h2>Reference to QlikView JavaScript file:</h2>
                <div>
                    <pre class="wrapped">
                        &lt;script language="javascript" type="text/javascript" src="http://SERVER_URL/QVAJAXZfc/htc/QvAjax.js"&gt;&lt;/script&gt;
                    </pre>
                </div>

				<h2>Source Code (Html Header):</h2>
				<div id="demo-source-header"></div>

                <h2>Source Code (CSS Definition):</h2>
                <div id="demo-source-css"></div>

				<h2>Div Integration:</h2>
				<div id="demo-div-integration"></div>

				<div id="spacerDiv" style="height:50px;"></div>
			</div>
			<br clear="all" />
				
		</div>
	</div>
</div>
<div id="divCopyright" class="Copyright"></div>
</body>
</html>